<template>
    <div class="home">
        <div class="header">
<!--            <div class="headerTitle">-->
<!--                <img src="../../assets/headtitle.png"/>-->
<!--            </div>-->
            <div class="Nav">
                <div class="funBtn" @click="turn('/type/classify')" >
                    <img src="../../assets/fenlei.png"/>
                    <div>分类</div>
                </div>
                <div class="search">
                    <cube-input placeholder="请输入搜索关键词" v-model="searchValue">
                        <div slot="prepend">
                            <img src="../../assets/search.png"/>
                        </div>
<!--                        <div slot="append">-->
<!--                            <img src="../../assets/camera.png"/>-->
<!--                        </div>-->
                        <div slot="append" class="searchBtn" @click="search">搜索</div>
                    </cube-input>
                </div>
                <div class="funBtn">
                    <img src="../../assets/xiaoxi@3x.png"/>
                    <div>消息</div>
                </div>
            </div>
            <cube-scroll
                    ref="scroll"
                    direction="horizontal"
                    class="horizontal-scroll-list-wrap">
                    <cube-tab-bar class="list-wrapper" show-slider  v-model="selectedLabel">
                        <cube-tab class="list-item" label="首页" @click.native="changePage(0)"></cube-tab>
                        <cube-tab class="list-item" :label="item.name" v-for="(item,index) of tabBarList" :key="item.id" @click.native="changePage(item.id)"/>
                    </cube-tab-bar>
            </cube-scroll>
        </div>
        <cube-scroll ref="scrollLine" :data="homeData.topList" @pulling-down="pullDown" @pulling-up="pullUpLoad" :options="options">
            <div class="con">
                <div class="top">
                    <div class="slide" style="transform:translateY(0);overflow:hidden">
                        <cube-slide :data="topBannerList">
                            <cube-slide-item v-for="(item, index) in topBannerList" :key="index">
                                <a>
                                    <img class="img" :src="imgDomain+item.img">
                                </a>
                            </cube-slide-item>
                        </cube-slide>
                    </div>
                </div>
                <menubar class="menubar" :list="menubarList" :id="tabId"></menubar>
                <head-lines v-if="headGoodsList.length!==0" :list="headGoodsList" :id="tabId"></head-lines>
                <adv-column @click.native="forward"></adv-column>
<!--                <collage-team></collage-team>-->
<!--                <bargain-area></bargain-area>-->
<!--                <menubanner :banners1="centerBannerList" :banners2="bottomBannerList" style="margin-top: 11px"></menubanner>-->
                <div class="goodsTitle">
                    <div class="title">热销单品</div>
                    <div class="more" @click="getMore">更多></div>
                </div>
                <toplist :items="homeData.topList"></toplist>
            </div>
        </cube-scroll>
    </div>


</template>

<script>
    import bargainArea from '@/components/bargain-area'
    import collageTeam from '@/components/collage-team'
    import advColumn from '@/components/adv-column'
    import headLines from '@/components/head-lines'
    import menubar from '@/components/menu-bar/demo'
    import menubanner from '@/components/menu-banner'
    import toplist from '@/components/top-list'
    import {topList, bannerList,getMenubarList,getTabBarType,getHeadGoods} from "@/api/home"

    export default {
        created() {
            this.refreshHome()
            this.getMenubarList()
            this.getTabBarList()
            // this.getHeadGoods(0)
        },
        computed:{
            topBannerList() {
               return  this.homeData.bannerList.filter(banner=>{
                    return banner.type === 0
                })
            }
        },
        methods: {
            pullDown() {
                this.refreshHome()
            },
            pullUpLoad() {
                this.getTopList(this.page)
            },
            getBannerList() {
                let id = this.tabId
                bannerList(id).then(res => {
                    this.homeData.bannerList = res.data
                })
            },
            getTopList(page) {
                let id = this.tabId
                if(id==0){
                    id = null
                }
                topList(page,id).then(res => {
                    if(this.page==1){
                        this.homeData.topList = res.data
                    }else {
                        this.homeData.topList= this.homeData.topList.concat(res.data)

                    }
                    this.page ++
                })
            },
            refreshHome() {
                this.getBannerList()
                this.getTopList(this.page)
            },
            //功能栏标签
            async getMenubarList(){
                const {data:res} = await getMenubarList()
                this.menubarList = res
            },
            //tabBar
            async getTabBarList(){
                const res = await getTabBarType()
                // console.log(res)
                this.tabBarList = res.data
                this.homeList = res.extra.home
                this.headGoodsList=this.homeList
            },
            //tab栏切换
            changePage(id){
                // console.log(id)
                this.$refs.scrollLine.scrollTo(0,0,300)
                if(this.tabId ==id){
                    return
                }
                if(id==0){
                    this.headGoodsList=this.homeList
                }
                this.tabBarList.forEach(item=>{
                    if(item.id==id){
                        // console.log(id)
                        this.headGoodsList=item.children
                        // console.log(this.headGoodsList)
                        return
                    }
                })
                // console.log(2333)
                this.page = 1
                this.tabId =id
                this.refreshHome()
                // this.getHeadGoods(id)
            },
            //获取头推荐商品列表
            // async getHeadGoods(id){
            //     const {data:res} = await getHeadGoods(id)
            //     this.headGoodsList = res
            // },
            //敬请期待
            forward(){
                const toast = this.$createToast({
                    txt: '敬请期待',
                    type: 'warn'
                })
                toast.show()
            },
            //更多
            getMore(){
                this.$router.push({
                    path:`/goodslist?type=${this.tabId}&ways=getmore`
                })
            },
            //页面跳转
            turn(path){
                this.$router.push({
                    path:path
                })
            },
            search(){
                if(this.searchValue==''){
                    return
                }
                this.$router.push({
                    path:`/goodslist?name=${this.searchValue}&ways=search`
                })
            }
        },
        data() {
            return {
                page:1,
                tabId:0,
                imgDomain: process.env.VUE_APP_IMG_DOMAIN,
                homeData: {
                    bannerList: [],
                    topList: []
                },
                options: {
                    pullDownRefresh:{
                        txt:' ',
                        stopTime:0
                    },
                    pullUpLoad: true,
                },
                selectedLabel:'首页',
                menubarList:[],
                tabBarList:[],
                headGoodsList:[],
                searchValue:''
            }
        },
        components: {
            menubar, menubanner, toplist, headLines, advColumn, collageTeam, bargainArea
        }
    }
</script>

<style scoped lang="stylus">
    .home
        width 100%
        height 100%
        overflow hidden
        /*background url("../../assets/helfcircindex.png") no-repeat*/
        background-size 100% auto
        .menubar
            margin-bottom 0.27rem
        .con
            padding-top 0.13rem
            background url("../../../src/assets/helfcirindex.png") no-repeat
            background-size 100% 1.71rem
            padding-bottom 2.4rem
            .top
                margin-bottom 10px
                padding 0 10px

                .slide
                    overflow hidden
                    border-radius 10px
                    transform translateY(0)
                    .img
                        height 141px
                        width 100%
        .header
            background-color #00A390
            padding 18px 15px
            min-height 91px
            /*padding-top 0.48rem*/
            overflow:auto

            padding-bottom 2px
            .headerTitle
                padding 0.44rem 0
                display flex
                justify-content center
                img
                    width 2.16rem
                    height 0.55rem
            .Nav
                display flex
                justify-content space-between
                .funBtn
                    display flex
                    flex-direction column
                    justify-content center
                    align-items center
                    line-height 100%
                    img
                        width 20px
                        height 20px
                    div
                        font-size 9px
                        white-space nowrap
                        color #fff
                .search
                    margin 0 0.44rem
                    .cube-input
                        height 0.80rem
                        border-radius 0.40rem
                        /*border 0.01rem solid rgb(40,198,196)*/
                        box-shadow 0.01rem 0.01rem 0.01rem 0.04rem rgb(40,198,196) inset
                        outline none
                        /*display flex
                        justify-content space-between
                        align-items center*/
                        div
                            display flex
                            justify-content center
                            align-items center
                        img
                            width 0.51rem
                            height 0.51rem
                            margin 0 0.23rem
                        /deep/.cube-input-field
                            padding 0
                        .searchBtn
                            width 1.60rem
                            height 0.80rem
                            background-color rgb(40,198,196)
                            border-radius 0.40rem
                            color #fff
                    .cube-input::after
                        border none
            .horizontal-scroll-list-wrap
                /*overflow:auto*/
                margin-top 19px
                height 0.8rem
                line-height 0
                /deep/.cube-scroll-content
                    height 0.75rem
                    display: inline-block

                .list-wrapper
                    height 0.75rem
                    /*padding: 0 10px*/
                    /*line-height: 60px*/
                    white-space: nowrap
                .list-item
                    /*overflow:auto*/
                    font-size 14px
                    height 15px
                    display: inline-block
                    margin-right 0.80rem
                    color #fff
                    margin-bottom 2px
                    line-height 0.4
                    div
                        line-height 1
                .cube-tab_active
                    color #fff
                    font-size 15px
                /deep/.cube-tab-bar-slider
                    background-color #fff
                    height .05rem
                    bottom .05rem
                    line-height 0.4



        .goodsTitle
            display flex
            justify-content space-between
            margin 0.27rem 0.37rem 0 0.37rem
            .title
                color #333333
                font-size 0.40rem
                font-weight 800
            .more
                color #999999
                font-size 0.29rem
        /deep/.top-list
            padding-top 0.20rem

</style>